<template>
  <div class="progress">
    <fx-card title="基础用法">
      <fx-progress :model-value="50" class="mb10" active></fx-progress>
      <fx-progress :model-value="60" class="mb10" active :format="format"></fx-progress>
      <fx-progress :model-value="70" class="mb10" active status="success"></fx-progress>
      <fx-progress :model-value="80" class="mb10" active status="warning"></fx-progress>
      <fx-progress :model-value="90" class="mb10" active status="error"></fx-progress>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="内显文字">
      <fx-progress :model-value="50" class="mb10" inside></fx-progress>
      <fx-progress :model-value="40" class="mb10" status="success" inside></fx-progress>
      <fx-progress :model-value="30" class="mb10" status="warning" inside></fx-progress>
      <fx-progress :model-value="20" class="mb10" status="error" inside></fx-progress>
      <template #hide>
        <pre v-highlight="inside"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义颜色">
      数组
      <fx-progress v-model="progress" class="mb10" :color="color1"></fx-progress>
      字符
      <fx-progress v-model="progress" class="mb10" :color="color2"></fx-progress>
      函数
      <fx-progress v-model="progress" class="mb10" :color="color3"></fx-progress>
      <fx-input-number v-model="progress" class="mb10" :step="5" :min="0" :max="100"></fx-input-number>
      <template #hide>
        <pre v-highlight="color"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="进度条宽度">
      <fx-progress :model-value="30" class="mb10" inside :stroke-width="30"></fx-progress>
      <fx-progress :model-value="25" class="mb10" status="success" inside :stroke-width="25"></fx-progress>
      <fx-progress :model-value="20" class="mb10" status="warning" inside :stroke-width="20"></fx-progress>
      <fx-progress :model-value="15" class="mb10" status="error" inside :stroke-width="15"></fx-progress>
      <template #hide>
        <pre v-highlight="width"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="圆形进度条">
      <div style="display:flex;justify-content:space-around;padding-bottom: 20px;">
        <fx-progress v-model="circleValue" type="circle" :format="format"></fx-progress>
        <fx-progress v-model="circleValue" type="circle" status="success"></fx-progress>
        <fx-progress v-model="circleValue" type="circle" :color="color1"></fx-progress>
        <fx-progress v-model="circleValue" type="circle" status="error">
          <template #icon>
            <i v-if="circleValue<30" class="iconfont icon-error" style="color: #ed4014"/>
            <i v-else-if="circleValue<60" class="iconfont icon-warning" style="color: #ff9900"/>
            <i v-else-if="circleValue<90" class="iconfont icon-primary" style="color: #2db7f5"/>
            <i v-else class="iconfont icon-success" style="color: #19be6b"/>
          </template>
        </fx-progress>
      </div>
      <fx-input-number v-model="circleValue" :step="5" :min="0" :max="100"></fx-input-number>
      <template #hide>
        <pre v-highlight="circle"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name: 'viewProgress',
  setup () {
    const progress = ref<number>(10)
    const color1 = reactive([
      {
        color: '#f56c6c',
        percentage: 20
      },
      {
        color: '#e6a23c',
        percentage: 40
      },
      {
        color: '#5cb87a',
        percentage: 60
      },
      {
        color: '#1989fa',
        percentage: 80
      },
      {
        color: '#6f7ad3',
        percentage: 100
      }
    ])
    const color3 = '#f60'
    const color2 = (percentage: number): string => {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    }
    const format = (val: number) => {
      return val / 100
    }
    const circleValue = ref<number>(10)

    const base = `<fx-progress :model-value="50" class="mb10" active></fx-progress>
<fx-progress :model-value="60" class="mb10" active :format="format"></fx-progress>
<fx-progress :model-value="70" class="mb10" active status="success"></fx-progress>
<fx-progress :model-value="80" class="mb10" active status="warning"></fx-progress>
<fx-progress :model-value="90" class="mb10" active status="error"></fx-progress>

export default defineComponent({
    setup() {
      const format = (val: number) => {
        return val / 100
      }
      return {
        format
      }
    }
})`
    const inside = `<fx-progress :model-value="50" inside></fx-progress>
<fx-progress :model-value="40" status="success" inside></fx-progress>
<fx-progress :model-value="30" status="warning" inside></fx-progress>
<fx-progress :model-value="20" status="error" inside></fx-progress>`
    const color = `数组 <fx-progress v-model="progress" class="mb10" :color="color1"></fx-progress>
字符 <fx-progress v-model="progress" class="mb10" :color="color2"></fx-progress>
函数 <fx-progress v-model="progress" class="mb10" :color="color3"></fx-progress>
<fx-input-number v-model="progress" :step="5" :min="0" :max="100"></fx-input-number>

export default defineComponent({
    setup() {
       const progress = ref<number>(10)
       const color1 = reactive([
          {
            color: '#f56c6c',
            percentage: 20
          },
          {
            color: '#e6a23c',
            percentage: 40
          },
          {
            color: '#5cb87a',
            percentage: 60
          },
          {
            color: '#1989fa',
            percentage: 80
          },
          {
            color: '#6f7ad3',
            percentage: 100
          }
        ])
        const color3 = '#f60'
        const color2 = (percentage: number): string => {
          if (percentage < 30) {
            return '#909399'
          } else if (percentage < 70) {
            return '#e6a23c'
          } else {
            return '#67c23a'
          }
        }
      }
})`
    const width = `<fx-progress :model-value="30" inside :stroke-width="30"></fx-progress>
<fx-progress :model-value="25" status="success" inside :stroke-width="25"></fx-progress>
<fx-progress :model-value="20" status="warning" inside :stroke-width="20"></fx-progress>
<fx-progress :model-value="15" status="error" inside :stroke-width="15"></fx-progress>`

    const circle = `<div style="display:flex;justify-content:space-around;padding-bottom: 20px;">
  <fx-progress v-model="circleValue" type="circle" :format="format"></fx-progress>
  <fx-progress v-model="circleValue" type="circle" status="success"></fx-progress>
  <fx-progress v-model="circleValue" type="circle" :color="color1"></fx-progress>
  <fx-progress v-model="circleValue" type="circle" status="error">
    <template #icon>
      <i v-if="circleValue<30" class="iconfont icon-error" style="color: #ed4014"/>
      <i v-else-if="circleValue<60" class="iconfont icon-warning" style="color: #ff9900"/>
      <i v-else-if="circleValue<90" class="iconfont icon-primary" style="color: #2db7f5"/>
      <i v-else class="iconfont icon-success" style="color: #19be6b"/>
    </template>
  </fx-progress>
</div>
<fx-input-number v-model="circleValue" :step="5" :min="0" :max="100"></fx-input-number>

export default defineComponent({
    setup() {
      const format = (val: number) => {
        return val / 100
      }
      return {
        format
      }
    }
})`

    return {
      color1,
      color2,
      color3,
      progress,
      circleValue,
      base,
      inside,
      color,
      width,
      format,
      circle
    }
  }
})
</script>

<style scoped lang="scss">
.progress {
}
</style>
